@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    border: 0;

}

body {
    background-color: #f3f3f3;
}

.topbar {
    height: 1.82rem;
    background-image: linear-gradient(to right, #f23a3a, #f75e31);
    border-radius: 0 0 .1rem .1rem;
}

.topbar-header {
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    padding-top: .2rem;

}

.topbar-icon {
    width: .5rem;
    height: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topbar-icon .iconfont {
    font-size: .22rem;
    height: .26rem;
}

.topbar-icon span {
    font-size: .07rem;
    color: #ffffff;
}

.topbar-hongbao img {
    width: .36rem;
    height: .36rem;
    margin-left: .09rem;

}

.topbarsearch {
    width: 2.36rem;
    height: .34rem;
    background-color: #fff;
    border-radius: .17rem;
}

.top-list {
    margin-left: .2rem;
}

.topbarsearch .iconfont {
    width: .18rem;
    height: .18rem;
    background-color: #000;
}

.topbarsearch input {
    margin: .1rem .1rem .1rem .36rem;
    background-color: #fff;
}

.list-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.list-content a {
    width: .42rem;
    height: .15rem;
    background-color: #fa5c5c;
    border-radius: .08rem;
    font-size: .12rem;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.list-content li {
    width: .42rem;
    height: .15rem;
    text-decoration: none;
    font-size: .12rem;
    color: #ffffff;
    text-align: center;
}

ul {
    list-style: none;
}

.top-banner {
    position: absolute;
    z-index: 20;
}

.top-banner img {
    width: 3.45rem;
    height: .90rem;
    background-color: #ffffff;
    box-shadow: inset 0px 0px 0px 0px #e5e5e5;
    border-radius: .1rem;
    margin-left: .15rem;
    margin-top: -.8rem;
}

.use-button {
    width: 3.56rem;
    height: 1.96rem;
    background-color: #fff;
    border-radius: .1rem .1rem 0px 0px;
    margin: 0 .1rem;
    margin-top: -.5rem;
}

.buttonlist {
    padding-top: .4rem;
}

.use-button ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.buttonlist {
    margin: .4rem .12rem 0rem;
    background-color: #fff;
    border-radius: .1rem .1rem 0px 0px;
}

.use-button li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .12rem;
}

.use-button img {
    width: .44rem;
    height: .44rem;
}

.use-button span {
    width: .48rem;
    height: .12rem;
    font-size: .12rem;
    color: #333333;
}

.headline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f2f2f2;
}

.headline-photo img {
    width: .54rem;
    height: .12rem;
    padding-left: .06rem;
}


.headline .jingxuan {

    width: .3rem;
    height: .14rem;
    background-color: #fa5c5c;
    border-radius: .06rem;

}

.headline .jingxuan .text {
    font-size: .1rem;
    color: #ffffff;
    text-align: center;

}

.jingxuan-text {
    width: 2.06rem;
    height: .2rem;
    font-size: .1rem;
    color: #7e7e7e;
    overflow: hidden;
    letter-spacing: 0px;
}

.jingxuan-more {
    width: .2rem;
    height: .1rem;
    font-family: SourceHanSansCN-Regular;
    font-size: .1rem;
    color: #333333;
    margin-bottom: .1rem;
}

/*发现周边版块*/
.findaround {
    margin-top: .1rem;
    width: 3.56rem;
    height: 1.96rem;
    background-color: #fff;
    margin: 0 .1rem;

}

.find-top {
    display: flex;
    align-items: center;
    margin: .08rem .06rem;
    border-bottom: 1px solid #f2f2f2;
}

.find-title {
    width: .8rem;
    font-family: SourceHanSansCN-Bold;
    font-size: .15rem;
    color: #333333;
    font-weight: bold;
}

.findtime-text {
    width: 1rem;
    height: .11rem;
    font-family: SourceHanSansCN-Regular;
    font-size: .1rem;
    color: #7e7e7e;
    margin-left: .04rem;
    text-align: center;
}


.time-number {
    width: .12rem;
    height: .12rem;
    background-color: #333333;
    text-align: center;
}

.find-time {
    display: flex;
    align-items: center;
    margin: .08rem .5rem .08rem .12rem;
}

.time-number {
    /* width: .05rem;
    height: .08rem; */
    font-family: SourceHanSansCN-Regular;
    font-size: .1rem;
    color: #fffefe;
}

.find-more {
    width: .48rem;
    height: .12rem;
    font-family: SourceHanSansCN-Regular;
    font-size: .12rem;
    color: #7e7e7e;
}

.find-body {
    display: flex;
    justify-content: space-between;

}

.time-kill,
.find-good {
    width: 1rem;
    height: 1.3rem;
    border-right: 1px solid #f3f3f3;
}

.findbody-right {
    width: 1.54rem;
    height: 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.findbody-topright {
    border-bottom: 1px solid #f3f3f3;
    height: .65rem;
    width: 1.54rem;
}

.kill-title {
    display: flex;
    align-items: center;
}

.kill-title img {
    width: .13rem;
    height: .13rem;
    margin-right: .05rem;
    margin-left: .05rem;
}

.kill-title span {
    font-family: SourceHanSansCN-Bold;
    font-size: .14rem;
    color: #333333;
    font-weight: bold;
}

.kill-title {
    text-align: center;
}